<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单配置</title>
    <link rel="stylesheet" th:href="@{/layui-v2.6.8/css/layui.css}" href="/static/layui-v2.6.8/css/layui.css">

</head>
<body>
<!-- 内容主体区域 -->
<div style="padding: 15px;">
    <input type="text" style="display: none" id="menuAll" th:value="${menuList}">
    <input type="text" style="display: none" id="pinkMenu" th:value="${roleMenuList}">
    <input type="text" style="display: none" id="roleId" th:value="${role.id}">
    <div id="test4" class="demo-transfer"></div>
    <br><br>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn" lay-demotransferactive="getData">保存设置</button>
<!--
        <button type="button" class="layui-btn" lay-demotransferactive="reload">重载实例</button>
-->
    </div>

</div>
</body>
<!-- 引入 layui.js -->
<script th:src="@{/layui-v2.6.8/layui.js}" src="/static/layui-v2.6.8/layui.js"></script>
<script th:src="@{/jquery-3.5.1/jquery-3.5.1.min.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
    layui.use(function(){
        var layer = layui.layer,transfer = layui.transfer
            ,form = layui.form
            ,util = layui.util;
        //layer.msg('Hello World');

        //模拟数据
        var data1= $.parseJSON($("#menuAll").val());
        var roelMenu = $.parseJSON($("#pinkMenu").val());
        //显示搜索框
        transfer.render({
            elem: '#test4'
            ,data: data1
            ,title: ['菜单列表', '权限菜单']
            ,value: roelMenu
            ,id: 'roleMenuPickList'
            ,showSearch: true
            /*,parseData:function(data){
                console.log(data)
                return{
                    "value":data.menuId
                    ,"title":data.menuName
                }
            }*/
        })
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                var getData = transfer.getData('roleMenuPickList'); //获取右侧数据
                $.ajax({
                    type:"GET",
                    url:"/amin/role/roleMenuSave",
                    dataType:"json",
                    contentType:"application/json; charset=utf-8",
                    data: {
                        "menuList":JSON.stringify(getData),
                        "id":$("#roleId").val()
                    },
                    success:function (data){
                        if(0 == data.code){
                            layer.msg('菜单权限设置成功');
                        }
                    },error:function (data){

                    }
                });
            }
            ,reload:function(){
                //实例重载
                transfer.reload('key123', {
                    title: ['文人', '喜欢的文人']
                    ,value: ['2', '5', '9']
                    ,showSearch: true
                })
            }
        });
        //监听提交
        form.on('submit(formSubmit)', function(data){
            //layer.msg(JSON.stringify(data.field));
            return true;
        });
    });
</script>
</html>